<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>01.custom-directive</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <p v-text="内置指令"></p>
            <!-- TODO:全局注册自定义指令 -->
            <p
            v-highlight:background.delayed.blink="{mainColor:'red',secondColor:'green',delay:500}"
        >
            自定义指令
        </p>
        <p
            v-local-highlight:background.delayed.blink="{mainColor:'red',secondColor:'green',delay:500}"
        >
            自定义本地指令
        </p>
        </div>
        <script type="text/javascript">
            //全局注册
            Vue.dircetive('highlight',{
                bind(el,binding) {
                    let delayed = 0;
                    if(binding.modifiers.delayed) {
                        delayed = 3000;
                    }

                    if(binding.modifiers.blink) {
                        let mainColor = binding.value.mainColor;
                        let secondColor = binding.value.secondColor;
                        let delay = binding.value.delay;
                        let currentColor = mainColor;
                        setTimeout(()=>{
                            setInterval(()=>{
                                currentColor === mainColor
                                    ? (currentColor = secondColor)
                                    : (currentColor = mainColor);
                                el.style.backgroudColor = currentColor;
                            },delay)
                        },delayed)
                    }else{
                        setTimeout(()=>{
                            if(binding.arg === 'background') {
                                el.style.background = binding.value.mainColor;
                            }else{
                                el.style.color = binding.value.mainColor;
                            }
                        },delayed)
                    }
                }
            })
            new Vue({
                el: '#app',
                directives:{
                    'local-highlight' : {
                        bind(el,binding) {
                    let delayed = 0;
                    if(binding.modifiers.delayed) {
                        delayed = 3000;
                    }

                    if(binding.modifiers.blink) {
                        let mainColor = binding.value.mainColor;
                        let secondColor = binding.value.secondColor;
                        let delay = binding.value.delay;
                        let currentColor = mainColor;
                        setTimeout(()=>{
                            setInterval(()=>{
                                currentColor === mainColor
                                    ? (currentColor = secondColor)
                                    : (currentColor = mainColor);
                                el.style.backgroudColor = currentColor;
                            },delay)
                        },delayed)
                    }else{
                        setTimeout(()=>{
                            if(binding.arg === 'background') {
                                el.style.background = binding.value.mainColor;
                            }else{
                                el.style.color = binding.value.mainColor;
                            }
                        },delayed)
                    }
                }
                    }
                }
            });
        </script>
    </body>
</html>
